<template>
  <div id="toolbar">
    <div class="ivu-back-top to-message"
      :class="classes"
      style="bottom: 70px; right: 0;"
      v-if="isDetail"
      @click="toMessage"
    >
      <div class="ivu-back-top-inner">
        <Icon type="md-chatboxes" />
      </div>
    </div>
    <BackTop 
      :height="height" 
      :right="0"
      :bottom="20"
    ></BackTop>
  </div>
</template>

<script>
export default {
  name: 'Tool',
  data() {
    return {
      height: 200,
      backTop: false
    }
  },
  props: {
    isDetail: Boolean,
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)  
    window.addEventListener('resize', this.handleScroll) 
  },
  computed: {
    classes() {
      return this.backTop ? 'ivu-back-top-show' : ''
    }
  },
  methods: {
    toMessage() {
      document.getElementById("vcomments").scrollIntoView({
        behavior: "smooth",
        block: "start",
        inline: "nearest"
      });
    },
    handleScroll() {
      this.backTop = window.pageYOffset >= this.height
    }
  }
}
</script>

<style lang='scss'>
.ivu-back-top {
  display: block;
  opacity: 0;
  transition: 0.5s ease;
  &.ivu-back-top-show {
    transform: rotate(360deg);
    right: 20px !important;
    opacity: 1;
  }
  .ivu-back-top-inner {
    background: rgba(40, 207, 207, 0.9);
    border-radius: 50%;
    height: 38px;
    width: 38px;
    i {
      padding: 7px 7px;
    }
  }
}
</style>